.widget {
    // default
    .widget-header,
    .widget-footer {
        border-color: #ccc;
        background-color: #fafafa;
        color: #222;
    }
    .widget-sortable,
    .widget-controls {
        background-color: inherit;
        a {
            color: #838383;
        }
        a:hover {
            color: #505050;
        }
    }

    // facebook
    &.widget-color-facebook {
        .widget-header,
        .widget-footer {
            border-color: #435a8b #3c5488 #334c83;
            background-color: #3a5795;
            color: #fff;
        }
        .widget-controls {
            a {
                color: #f0f0f0;
            }
            a:hover {
                color: #fff;
            }
        }
    }

    // lightblue
    &.widget-color-lightblue {
        .widget-header,
        .widget-footer {
            border-color: #a0aeb3;
            background: #cbd2d5;
            color: #000;
        }
        .widget-controls {
            a {
                color: #f0f0f0;
            }
            a:hover {
                color: #fff;
            }
        }
    }

    // night
    &.widget-color-night {
        .widget-header,
        .widget-footer {
            border-color: #383838;
            background: #404040;
            color: #fff;
        }
        .widget-controls {
            a {
                color: #f0f0f0;
            }
            a:hover {
                color: #fff;
            }
        }
    }

    // nightsky
    &.widget-color-nightsky {
        .widget-header,
        .widget-footer {
            border-color: #45474b;
            background-color: #4c4f53;
            color: #fff;
        }
        .widget-controls {
            a {
                color: #f0f0f0;
            }
            a:hover {
                color: #fff;
            }
        }
    }

    // teal
    &.widget-color-teal {
        .widget-header,
        .widget-footer {
            border-color: #508180;
            background: #568a89;
            color: #fff;
        }
        .widget-controls {
            a {
                color: #f0f0f0;
            }
            a:hover {
                color: #fff;
            }
        }
    }
}
